<template>
  <div class="contentSwiper">
    <div class="swiper-container" v-swiper:swiper="swiperOption" ref="swiperContent">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in raindropPic" :key="index">
          <div
            v-if="item.type == 0"
            class="contentInfo"
            :style="{background: 'url('+ item.pics +') center/cover ' }"></div>
          <content-video v-if="item.type == 3" :videoUrl='item.video_url'/>
        </div>
      </div>
      <div v-show="picLength" class="swiper-pagination swiperSelf"></div>
    </div>
  </div>
</template>
<script>
  import ContentVideo from '../common/ContentVideo'

  export default {
    components: { ContentVideo },
    props: {
      raindropPic: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        // 所有配置均为可选（同Swiper配置）
        swiperOption: {
          notNextTick: true,
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
          },
          on: {
            //监听滑动切换事件，返回swiper对象
            slideChange: () => {

            }
          }
        }
      }
    },
    swiper() {
      // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
      return this.$refs.swiperContent.swiper
    },
    created() {

    },
    mounted() {
    },
    computed: {
      picLength() {
        return this.raindropPic.length > 1 ? true : false
      }
    },
    methods: {}
  }
</script>
<style scoped lang="scss">
  .contentSwiper {
    height: 84.3%;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .swiper-slide {
    height: 100%;
    font-size: 18px;
    display: flex;
    justify-content: center;
  }

  .contentInfo {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("http://cdn1.raindrop.link/topic/p268x268/7f2bf54747b117928afb2a76a73a0862.png") no-repeat center;
    -webkit-background-size: 100%;
    background-size: 100%;
  }

  .swiper-pagination {
    height: auto;
    bottom: auto;
    top: 0;

    .swiper-pagination-bullet {
      width: 24px !important;
      height: 4px !important;
      border-radius: 0 !important;
    }
  }

</style>
